
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习2</title>
</head>
<body>
	<html>
		<body>
	    <style type="text/css">
			html,div,ul,li {margin: 0px;padding: 0px;}
			a{cursor: pointer;}
			li {list-style: none;cursor: pointer;}
			fieldset {border: #000 1px dashed;width: 225px;height: 225px;padding: 10px;text-align: center;float: left;margin-left: 5px;}
			#cont_left {width: 300px;height: 500px;float: left;}
			#cont_right {float: left;}
			.newcss1{background-color: yellowgreen;}
			.change{
				background-color: pink;
				color:#888888;
			}
		</style>

			<div id="cont_left">
				<ul><img src="img/fold.gif"><a onclick="show('menu1')"> 通过DOM获取信息 </a>
					<ul id="menu1">
						<li onclick="showImg()"><img src="img/doc.gif">获取原始图片路径</li>
						<li onclick="getFruit()"><img src="img/doc.gif">获取我喜欢的水果</li>
					</ul>
				</ul>
	
				<ul><img src="img/fold.gif"><a onclick="show('menu2')"> 通过DOM操作元素 </a>
					<ul id="menu2">
						<li onclick="createImg()"><img src="img/doc.gif">创建图片</li>
						<li onclick="cloneImg()"><img src="img/doc.gif">克隆图片</li>
						<li onclick="changeImg()"><img src="img/doc.gif">改变图片</li>
						<li onclick="removeImg()"><img src="img/doc.gif">删除图片</li>
					</ul>
				</ul>
	
				<ul><img src="img/fold.gif"><a onclick="show('menu3')"> 通过DOM操作样式 </a>
					<ul id="menu3">
						<li onclick="changeCss1()"><img src="img/doc.gif">为原始图片加上行间样式</li>
						<li onclick="changeCss2()"><img src="img/doc.gif">为所有的fieldset加上内部样式</li>
					</ul>
				</ul>
	
			</div>
			<fieldset>
				<legend>原始图片</legend>
				<img id="fruit" src="img/fruit.jpg">
			</fieldset>
			<fieldset>
				<legend>图片路径</legend>
				<p id="msg1">在这里显示</p>
			</fieldset>
			<fieldset>
				<legend>选择你喜欢的水果</legend>
				<ul style="text-align: left;">
					<li>
						<input name="enjoy" type="checkbox" value="苹果">苹果
					</li>
					<li>
						<input name="enjoy" type="checkbox" value="香蕉" checked="checked">香蕉
					</li>
					<li>
						<input name="enjoy" type="checkbox" value="葡萄">葡萄
					</li>
					<li>
						<input name="enjoy" type="checkbox" value="梨" checked="checked">梨
					</li>
					<li>
						<input name="enjoy" type="checkbox" value="西瓜">西瓜
					</li>
				
				</ul>
				<div id="msg2" style="margin-top: 10px;text-align: left;"></div>
			</fieldset>
			<fieldset>
				<legend>创建图片</legend>
				<div id="msg3"></div>
			</fieldset>
			<fieldset>
				<legend>克隆图片</legend>
				<div id="msg4"></div>
			</fieldset>
			
			<script>
				//菜单收缩与扩展
				function show(title) {
					let currentMenu = document.getElementById(title);
					let currentStatus = currentMenu.style.display;
					currentMenu.style.display = currentStatus == "" ? "none" : "";
				}
				
				//获取原始图片路径
				function showImg() {
					var fruit = document.getElementById('fruit');
					var  a = document.getElementById('msg1');
	                a.innerHTML=fruit.getAttribute('src');
				}
				//获取喜欢的水果
				function getFruit() {
					var a = document.getElementsByName('enjoy'); 			
					document.getElementById('msg2').innerHTML = "你最喜欢的水果是：";
					
					for(var i=0;i<=a.length;i++){
						if(a[i].checked == true){
							document.getElementById('msg2').innerHTML += a[i].value+" " ;
					}
					}
				}
				//创建图片
				function createImg() {
					var msg3 = document.getElementById('msg3'); 
					var img1 = document.createElement('img'); //219971036 殷健翔
					img1.src = "img/grape.jpg";   
					msg3.appendChild(img1); 
				}
				//克隆图片
				function cloneImg() {
					var msg4 = document.getElementById('msg4'); 
					var cloneim = document.getElementById('fruit'); 
					msg4.appendChild(cloneim.cloneNode());  
				}
				//改变图片
				function changeImg() {
					var msg5 = document.getElementById('fruit'); 
					msg5.src = "img/grape.jpg"; 
				}
				//删除图片
				function removeImg() {
					var msg6 = document.getElementById('fruit'); 
					msg6.parentNode.removeChild(msg6); 

				}
				//操作样式1
				function changeCss1(){
					var ele = document.getElementById('fruit'); //获取id
					ele.style.border = 'solid 10px black';  
				}
				//操作样式2
				function changeCss2(){
					var ele = document.getElementsByTagName('fieldset');
					for(var i=0;i<ele.length;i++){
					ele[i].style.backgroundColor = "blue";
				}
				}
			</script>
	</body>
</html>
</body>
</html